<template>
    <HeaderContainer title="项目列表">
        <template #main-content>
            <div v-loading="loading">
                <div v-for="item in modelList" :key="item.model?.key">
                    <div class="model-panel">
                        <el-row type="flex" align="middle">
                            <div class="title">{{ item.model?.name }}</div>
                        </el-row>
                        <div class="divider"></div>
                    </div>
                    <el-row type="flex" class="project-list">
                        <el-card v-for="projItem in item.project" :key="projItem.key" class="project-card">
                            <template #header>
                                <div class="title">
                                    <span>{{ projItem.name }}</span>
                                </div>
                            </template>
                            <div class="content">{{ projItem.desc ?? '-------' }}</div>
                            <template #footer>
                                <el-row justify="end">
                                    <el-button link type="primary" @click="handleEnter(projItem)">
                                        进入
                                    </el-button>
                                </el-row>
                            </template>
                        </el-card>
                    </el-row>
                </div>
            </div>
        </template>
    </HeaderContainer>
</template>


<script setup>
import { ref, onMounted } from 'vue'
import HeaderContainer from '$aegisWidgets/header-container/header-container.vue'
import curl from '$aegisCommon/curl.js'

const loading = ref(false)
const modelList = ref([])
onMounted(() => {
    getModelList()
})
const getModelList = async () => {
    loading.value = true
    const res = await curl({
        method: 'get',
        url: '/api/project/model_list',
        errorMessage: '获取项目列表失败'
    })
    loading.value = false
    modelList.value = res.data || []
}
const handleEnter = (projItem) => {
    const { origin } = window.location
    window.open(`${origin}/view/dashboard${projItem.homePage}`)
}
</script>


<style lang='less' scoped>
.model-panel {
    margin: 20px 50px;
    min-width: 500px;

    .title {
        font-size: 25px;
        font-weight: bold;
    }

    .divider {
        margin-top: 10px;
        border-bottom: 1px dashed #d7d7d7;
        width: 200px;
    }
}

.project-list {
    margin: 0 50px;

    .project-card {
        margin-right: 30px;
        margin-bottom: 20px;
        width: 300px;

        .title {
            font-weight: bold;
            font-size: 17px;
            color: #47a2f2;
        }

        .content {
            height: 70px;
            color: darkgrey;
            font-size: 15px;
            overflow: auto;
        }
    }
}
</style>